<template>
    <div>
      <h1>品牌管理</h1>
      <table border="1" cellSpacing="0">
        <tr>
          <th>编号</th>
          <th>资产名称</th>
          <th>价格</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="obj in list" :key="obj.id">
          <td>{{ obj.id }}</td>
          <td>{{ obj.name }}</td>
          <td :class="obj.price >100 ? 'isRed': ''">{{ obj.price }}</td>
          <!-- <td :class="{isRed: obj.price >100}">{{ obj.price }}</td> -->
          <td>{{ obj.time }}</td>
          <td>
            <button @click="toDel(obj.id)">删除</button>
          </td>
        </tr>
      </table>
      <input type="text"  placeholder="资产名称" v-model="form.name">
      <input type="text"  placeholder="价格" v-model.number="form.price">
      <button @click="toAdd">添加资产</button>
    </div>
  </template>
  
  <script>
  export default {
    data(){
      return {
        form: {
          name: '',
          price: 0
        },
        list: [
          { id: 100, name: "外套", price: 199, time: new Date('2010-08-12')},
          { id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
          { id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
          { id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
        ],
      }
    },
    methods:{
      toDel(id){
        // targetIndex
        let tarInd = this.list.findIndex(obj => obj.id === id)
        // splice(索引index, 删除几个, 添加的内容)
        tarInd !== -1 ? this.list.splice(tarInd, 1) : ''
      },
      toAdd(){
        // 构造新增的对象
        if(!this.form.name || !this.form.price){
          alert('请输入资产,价格')
          return
        }
        let obj = {
          id: + new Date(), // 时间戳
          name: this.form.name,
          price: this.form.price,
          time: new Date()
        }
        // this.list.push(obj)
        this.list.splice(this.list.length, 0, obj)
        this.toReset()
      },
      toReset(){
        this.form = {
          name: '',
          price: 0
        }
      }
    }
  }
  </script>
  
  <style>
  .isRed {
    color: red;
  }
  </style>